<template>
  <div>
    <div>
      <div class="container">
        <!-- 找回密码 -->
        <el-form
          class="login-form"
          style="height:240px"
          v-if="pageFlag=='security1'"
          ref="registerForm"
          :model="registerForm"
          :rules="rules"
        >
          <div v-if="true">找回密码</div>
          <el-form-item prop="username">
            <div v-if="false">账号：</div>
            <el-input v-model="registerForm.username" placeholder="请您输入账号" />
          </el-form-item>
          <el-button type="primary" @click="getSecurity('registerForm')">下一步</el-button>
          <router-link to="/login">已有账户登录</router-link>
        </el-form>

        <el-form
        class="login-form"
          style="height:340px"
          v-if="pageFlag=='security2'"
          ref="registerForm"
          :model="registerForm"
          :rules="rules"
        >
          <div v-if="true">找回密码</div>

          <el-form-item prop="pquestion">
            <el-input readonly v-model="registerForm.pquestion" placeholder="请输入密保问题" />
          </el-form-item>

          <el-form-item prop="myanswer">
            <el-input v-model="registerForm.myanswer" placeholder="请您输入密保答案" />
          </el-form-item>

          <el-button type="primary" @click="validateSecurity('registerForm')">下一步</el-button>
          <router-link to="/login">已有账户登录</router-link>
        </el-form>

        <el-form
        class="login-form"
          style="height:340px"
          v-if="pageFlag=='security3'"
          ref="registerForm"
          :model="registerForm"
          :rules="rules"
        >
          <div v-if="true">找回密码</div>
          <el-form-item prop="newpassword">
            <div v-if="false">新密码：</div>
            <el-input v-model="registerForm.newpassword" type="password" placeholder="请您输入新密码" />
          </el-form-item>
          <el-form-item prop="repassword">
            <div v-if="false">确认密码：</div>
            <el-input v-model="registerForm.repassword" type="password" placeholder="请您确认密码" />
          </el-form-item>
          <el-button type="primary" @click="updatePassword('registerForm')">修改密码</el-button>
          <router-link to="/login">已有账户登录</router-link>
        </el-form>

        <!-- 注册界面 -->
        <el-form
          class="login-form"
          v-if="pageFlag=='register'"
          ref="registerForm"
          :model="registerForm"
          :rules="rules"
        >
          <div v-if="true">注册</div>
          <el-form-item v-if="tableName=='yonghu'" prop="yonghuming">
            <div v-if="false">用户名：</div>
            <el-input v-model="registerForm.yonghuming" placeholder="请输入用户名" />
          </el-form-item>
          <el-form-item v-if="tableName=='yonghu'" prop="mima">
            <div v-if="false">密码：</div>
            <el-input v-model="registerForm.mima" type="password" placeholder="请输入密码" />
          </el-form-item>
          <el-form-item v-if="tableName=='yonghu'" prop="mima">
            <div v-if="false">确认密码：</div>
            <el-input v-model="registerForm.mima2" type="password" placeholder="请再次输入密码" />
          </el-form-item>
          <el-form-item v-if="tableName=='yonghu'" prop="xingming">
            <div v-if="false">姓名：</div>
            <el-input v-model="registerForm.xingming" placeholder="请输入姓名" />
          </el-form-item>
          <el-form-item v-if="tableName=='yonghu'" prop="xingbie">
            <span>请选择性别：</span>
            <el-radio-group v-model="registerForm.xingbie">
              <el-radio v-for="(item,index) in yonghuxingbieOptions" :label="item">{{ item }}</el-radio>
            </el-radio-group>

            <!-- <el-select v-model="registerForm.xingbie" placeholder="请选择性别">
              <el-option
                v-for="(item,index) in yonghuxingbieOptions"
                :key="index"
                :label="item"
                :value="item"
              ></el-option>
            </el-select>-->
          </el-form-item>

          <el-form-item v-if="tableName=='yonghu'" prop="shouji">
            <div v-if="false">手机：</div>
            <el-input v-model="registerForm.shouji" placeholder="请输入手机" />
          </el-form-item>
          <el-form-item v-if="tableName=='yonghu'" prop="pquestion">
            <div v-if="false">密保问题：</div>
            <el-input v-model="registerForm.pquestion" placeholder="请输入密保问题" />
          </el-form-item>
          <el-form-item v-if="tableName=='yonghu'" prop="panswer">
            <div v-if="false">密保答案：</div>
            <el-input v-model="registerForm.panswer" placeholder="请输入密保答案" />
          </el-form-item>
          <el-form-item v-if="tableName=='yonghu'" prop="touxiang">
            <file-upload
              tip="点击上传头像"
              action="file/upload"
              :limit="1"
              :multiple="true"
              :fileUrls="registerForm.touxiang?registerForm.touxiang:''"
              @change="yonghutouxiangUploadChange"
            ></file-upload>
          </el-form-item>
          <el-button type="primary" @click="submitForm('registerForm')">注册</el-button>
          <el-button @click="resetForm('registerForm')">重置</el-button>
          <router-link to="/login">已有账户登录</router-link>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  //数据集合
  data() {
    return {
      pageFlag: "",
      tableName: "",
      registerForm: {
        xingbie: ""
      },
      rules: {},
      yonghuxingbieOptions: []
    };
  },
  mounted() {},
  created() {
    this.pageFlag = this.$route.query.pageFlag;
    this.tableName = this.$route.query.role;
    if ("yonghu" == this.tableName) {
      this.rules.yonghuming = [
        { required: true, message: "请输入用户名", trigger: "blur" }
      ];
    }
    if ("yonghu" == this.tableName) {
      this.rules.mima = [
        { required: true, message: "请输入密码", trigger: "blur" }
      ];
    }
    if ("yonghu" == this.tableName) {
      this.rules.xingming = [
        { required: true, message: "请输入姓名", trigger: "blur" }
      ];
    }
    this.yonghuxingbieOptions = "男,女,保密".split(",");
    if ("yonghu" == this.tableName) {
      this.rules.shouji = [
        { required: true, validator: this.$validate.isMobile, trigger: "blur" }
      ];
    }
  },
  //方法集合
  methods: {
    // 获取uuid
    getUUID() {
      return new Date().getTime();
    },
    // 下二随
    yonghutouxiangUploadChange(fileUrls) {
      this.registerForm.touxiang = fileUrls.replace(
        new RegExp(this.$config.baseUrl, "g"),
        ""
      );
    },

    // 多级联动参数

    //获取密保问题
    getSecurity() {
      this.tableName = "yonghu";
      if (!this.tableName) {
        this.$message.error("请选择角色");
        return false;
      }
      if (!this.registerForm.username) {
        this.$message.error("请输入账号");
        return false;
      }
      this.$http({
        url:
          this.tableName + `/security?username=` + this.registerForm.username,
        method: "get"
      }).then(({ data }) => {
        if (data.data && data.code === 0) {
          this.registerForm = data.data;
          this.pageFlag = "security2";
        } else {
          if (!data.data) {
            this.$message.error("用户不存在");
          } else {
            this.$message.error(data.msg);
          }
        }
      });
    },
    //验证密保问题
    validateSecurity() {
      let that = this;
      if (this.registerForm.panswer != this.registerForm.myanswer) {
        this.$message.error("答案输入不正确");
        return false;
      }
      this.$message.success("答案正确");
      setTimeout(() => {
        this.pageFlag = "security3";
      }, 1000);
    },
    // 修改密码
    updatePassword() {
      if (!this.registerForm.newpassword) {
        this.$message.error("请输入新密码");
        return;
      }
      if (this.registerForm.newpassword != this.registerForm.repassword) {
        this.$message.error("两次密码输入不一致");
        return;
      }
      this.registerForm.mima = this.registerForm.newpassword;
      this.registerForm.password = this.registerForm.newpassword;
      this.$http
        .post(this.tableName + `/update`, this.registerForm)
        .then(res => {
          if (res.data.code === 0) {
            this.$message({
              message: "密码修改成功",
              type: "success",
              duration: 1500,
              onClose: () => {
                this.$router.push("/login");
              }
            });
          } else {
            this.$message.error(res.data.msg);
          }
        });
    },
    submitForm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          var url = this.tableName + "/register";
          if (
            `yonghu` == this.tableName &&
            this.registerForm.mima != this.registerForm.mima2
          ) {
            this.$message.error(`两次密码输入不一致`);
            return;
          }
          this.$http.post(url, this.registerForm).then(res => {
            if (res.data.code === 0) {
              this.$message({
                message: "注册成功",
                type: "success",
                duration: 1500,
                onClose: () => {
                  this.$router.push("/login");
                }
              });
            } else {
              this.$message.error(res.data.msg);
            }
          });
        } else {
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    }
  }
};
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.container {
  width: 100vw;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: url("https://starry-lixu.oss-cn-hangzhou.aliyuncs.com/202209141908599.jpg")
    fixed no-repeat;
  background-size: cover;
}
.login-form {
  width: 400px;
  height: 900px;
  display: flex;
  flex-direction: column;
  padding: 40px;
  text-align: center;
  position: relative;
  z-index: 100;
  background: inherit;
  border-radius: 18px;
  overflow: hidden; /* 隐藏多余的模糊效果*/
}
.login-form::before {
  content: "";
  width: 120%;
  height: 120%;
  position: absolute;
  top: -5px;
  left: -5px;
  overflow: hidden;
  background: inherit;
  box-shadow: inset 0 0 0 250px rgba(255, 255, 255, 0.25);
  filter: blur(6px);
  filter: blur(6px);
  z-index: -1;
}
.login-form h2 {
  font-size: 18px;
  font-weight: 400;
  color: #3d5245;
}
​ .login-form input,
.login-form button {
  margin: 6px 0;
  height: 36px;
  border: none;
  background-color: rgba(255, 255, 255, 0.3);
  border-radius: 4px;
  padding: 0 14px;
  color: #3d5245;
}

.sex-and-upload {
  display: flex;
}
.login-form button:focus,
.login-form input:focus {
  outline: 0;
}
</style>
